<template>
  <div class="app-container">
    <el-card class="box-card">
      <el-page-header :icon="ArrowLeft" title="返回" @back="goBack">
        <template #content>
          <span class="text-large font-600 mr-3"> 添加题目 </span>
        </template>
      </el-page-header>

      <!-- 基础信息 -->
      <el-form :model="form" label-width="120px">
        <el-form-item label="题目类型" required>
          <el-select v-model="form.type" @change="changeType">
            <el-option label="单选题" value="single" />
            <el-option label="多选题" value="multiple" />
            <el-option label="填空题" value="fill_blank" />
            <el-option label="简答题" value="short_explain" />
          </el-select>
        </el-form-item>
        <el-form-item label="题目标题" required>
          <el-input v-model="form.title" placeholder="请输入题目标题" />
        </el-form-item>
      </el-form>

      <!-- 动态表单区域 -->
      <div class="dynamic-form">
        <!-- 单选题表单 -->
        <div v-if="form.type === 'single'">
          <h3>单选题设置</h3>
          <div v-for="(option, index) in form.single.options" :key="index" class="option-item">
            <el-radio v-model="form.single.answer" :label="index">
              <el-input v-model="option.content" placeholder="选项内容" />
            </el-radio>
            <el-button type="danger" circle :disabled="form.single.options.length <= 2" @click="removeOption(index)">
              <IconifyIcon icon="ep:delete" />
            </el-button>
          </div>
          <el-button type="primary" plain @click="addOption">
            <IconifyIcon icon="ep:plus" /> 添加选项
          </el-button>
        </div>

        <!-- 多选题表单 -->
        <div v-if="form.type === 'multiple'">
          <h3>多选题设置</h3>
          <div v-for="(option, index) in form.multiple.options" :key="index" class="option-item">
            <el-checkbox v-model="form.multiple.answers" :label="index">
              <el-input v-model="option.content" placeholder="选项内容" />
            </el-checkbox>
            <el-button type="danger" circle :disabled="form.multiple.options.length <= 2" @click="removeOption(index)">
              <IconifyIcon icon="ep:delete" />
            </el-button>
          </div>
          <el-button type="primary" plain @click="addOption">
            <IconifyIcon icon="ep:plus" /> 添加选项
          </el-button>
        </div>

        <!-- 填空题表单 -->
        <div v-if="form.type === 'fill_blank'">
          <h3>填空题设置</h3>
          <el-form-item label="填空模板">
            <el-input v-model="form.fill_blank" type="textarea" :rows="6" placeholder="请输入填空题答案" />
          </el-form-item>
        </div>

        <!-- 简答题表单 -->
        <div v-if="form.type === 'short_explain'">
          <h3>简答题设置</h3>
          <el-form-item label="简答模板">
            <el-input v-model="form.short_explain" type="textarea" :rows="6" placeholder="请输入简答题答案" />
          </el-form-item>
        </div>
      </div>

      <el-form :model="form" label-width="120px">
        <el-form-item label="题目描述" required>
          <el-input v-model="form.description" type="textarea" :rows="3" placeholder="请输入题目描述" />
        </el-form-item>
        <el-form-item label="知识点" required>
          <el-input v-model="form.kps" type="textarea" :rows="3" placeholder="请输入题目描述" />
        </el-form-item>
        <el-form-item label="解析" required>
          <el-input v-model="form.explain" type="textarea" :rows="3" placeholder="请输入题目描述" />
        </el-form-item>
      </el-form>

      <el-button type="primary" @click="submitForm">提交</el-button>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { reactive } from "vue";
import { ref } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { useQstnStoreHook } from "@/store/modules/qstn";

const router = useRouter();
const formRef = ref();

// 表单数据结构
const form = reactive({
  title: "",
  type: "single", // 默认单选题
  description: "",
  kps: "", // 知识点列表
  explain: "", // 题目解析

  // 单选题数据
  single: {
    options: [
      { content: "" },
      { content: "" },
      { content: "" },
      { content: "" }
    ],
    answer: 0 // 正确答案索引
  },

  // 多选题数据
  multiple: {
    options: [
      { content: "" },
      { content: "" },
      { content: "" },
      { content: "" }
    ],
    answers: [] // 正确答案索引数组
  },

  // 填空题
  fill_blank: "",
  // 简答题
  short_explain: ""
});

// 切换题目类型
const changeType = (type: string) => {
  console.log(`切换到 ${type} 类型`);
};

// 添加选项
const addOption = () => {
  if (form.type === "single") {
    form.single.options.push({ content: "" });
  } else if (form.type === "multiple") {
    form.multiple.options.push({ content: "" });
  }
};

// 移除选项
const removeOption = (index: number) => {
  if (form.type === "single" && form.single.options.length > 2) {
    form.single.options.splice(index, 1);
    // 调整答案索引
    if (form.single.answer === index) {
      form.single.answer = 0;
    } else if (form.single.answer > index) {
      form.single.answer--;
    }
  } else if (form.type === "multiple" && form.multiple.options.length > 2) {
    form.multiple.options.splice(index, 1);
    // 从答案中移除被删除的选项
    form.multiple.answers = form.multiple.answers
      .filter(i => i !== index)
      .map(i => (i > index ? i - 1 : i));
  }
};

// 提交表单
const submitForm = async () => {
  // 验证逻辑
  if (!form.title) {
    ElMessage.error("请输入题目标题");
    return;
  }

  if (!form.description) {
    ElMessage.error("请输入题目描述");
    return;
  }

  // 根据类型验证
  if (form.type === "single") {
    if (form.single.options.some(opt => !opt.content)) {
      ElMessage.error("请填写所有选项内容");
      return;
    }
  } else if (form.type === "multiple") {
    if (form.multiple.options.some(opt => !opt.content)) {
      ElMessage.error("请填写所有选项内容");
      return;
    }
    if (form.multiple.answers.length === 0) {
      ElMessage.error("请选择至少一个正确答案");
      return;
    }
  } else if (form.type === "fill_blank") {
    if (!form.fill_blank) {
      ElMessage.error("请填写填空题答案");
      return;
    }
  } else if (form.type === "short_explain") {
    if (!form.short_explain) {
      ElMessage.error("请填写简答题答案");
      return;
    }
  }

  // 提交逻辑
  console.log("提交表单:", JSON.stringify(form));
  useQstnStoreHook()
    .doAddQstn(form)
    .then(res => {
      if (res.success) {
        console.log("添加题目成功！v0.0.1");
      }
    })
    .finally(() => {
      console.log("ok");
    });
  ElMessage.success("题目添加成功");
  router.push({ name: "qstn_qstn_mgmt" });
};

// 返回列表页
const goBack = () => {
  router.push({ name: "qstn_qstn_mgmt" });
};
</script>

<style scoped>
.app-container {
  padding: 20px;
}

.dynamic-form {
  margin-top: 30px;
  padding: 20px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
}

.option-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.option-item .el-input {
  margin: 0 10px;
  width: 300px;
}

.test-case {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.test-case .el-input {
  flex: 1;
}
</style>
